<!-- 我的团队 -->
<template>
	<view class="page_box team-wrap">
		<view class="team-data-box">
			<u-search placeholder="请输入ID/昵称/手机号" v-model="keyword" @search="searchUser" @custom="searchUser"
				@clear="clearSearch"></u-search>
			<view class="data-card" style="margin-top: 30rpx;">
				<view class="total-item">
					<view class="item-title">
						<view>{{ title }} : {{ total || 0 }}</view>
						<!-- <image class="referrer-avatar u-m-r-10" :src="referrerInfo.avatar" mode=""></image>
						{{ referrerInfo.nickname }} -->
					</view>
					<!-- <view class="total-num">成员人数: {{ total || 0 }}</view> -->
				</view>
			</view>
		</view>

		<view class="content_box">
			<scroll-view scroll-y="true" @scrolltolower="loadMore" class="scroll-box">
				<!-- 团队列表 -->
				<view class="team-box">
					<view class="team-list" v-for="(item, index) in teamList" :key="item.id">
						<sh-collapse-item :id="item.id" :avatar="item.avatar" :dateTime="item.createtime"
							:level="item.level || 0" :image="item.image" :name="item.mobile" :isUnfold="item.isUnfold" :team="item.team"
							@click="onTeamList()" @childTypeClick="childTypeClick"></sh-collapse-item>
						<view class="end-btn">
							<!-- <u-button size="mini" @click="onAgentView(item.id)">资料</u-button> -->
							<!-- <u-button size="mini" @click="onTeamList(item.id)">团队</u-button> -->
							<view>
								<u-button size="mini"
									@click="jump('/pages/app/agent/team-list', { type:'all', pid: item.id })">
									全部：{{ item.team.all }}</u-button> 
								<u-button size="mini"
									@click="jump('/pages/app/agent/team-list', { type:'direct', pid: item.id })">
									直推：{{ item.team.direct }}</u-button>
							</view>
						</view>
					</view>
				</view>
				<!-- 缺省页
				<shopro-empty v-show="isEmpty" marginTop="50rpx" :image="$IMG_URL + '/imgs/empty/no_team.png'"
					tipText="暂无团队人员"></shopro-empty>
				<!-- 更多 -->
				<u-loadmore v-if="teamList.length" height="80rpx" :status="loadStatus" icon-type="flower"
					color="#ccc" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import shCollapseItem from '../components/sh-collapse-item.vue';
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	export default {
		components: {
			shCollapseItem
		},
		data() {
			return {
				backTextStyle: {
					color: '#fff',
					fontSize: '40rpx',
					fontWeight: '500'
				},
				isEmpty: false,

				referrerInfo: {},
				teamList: [], //团队列表
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1,
				total: 0,
				// 二级
				childrenTeamList: [],
				childrenCurrentPage: 1,
				childrenLastPage: 1,
				childrenLoad: false,
				isRefresh: false,
				typeNameMap: {
					all: '全部粉丝',
					direct: '直推粉丝',
					other: '其它粉丝',
					general: '普通粉丝',
					level2: '体验店',
					level3: '区级代理',
					level4: '县级代理',
					level5: '市级代理',
					level6: '省级代理',
					today: '今日新增',
					yesterday: '昨日新增',
					week: '本周注册',
					month: '本月注册',
					ulto: '上月注册'
				},
				keyword: ''
			};
		},
		computed: {
			...mapState({
				userInfo: ({
					user
				}) => user.userInfo,
				agentInfo: ({
					user
				}) => user.agentInfo
			})
		},
		onLoad() {
			const params = this.$Route.query;
			this.type = params.type || 'all';
			this.pid = params.pid || this.userInfo.id
			this.title = this.typeNameMap[this.type];
			this.getList();
		},
		methods: {
			...mapActions(['getAgent']),
			// 点击队员项
			onTeamList(param) {
				this.jump('/pages/app/agent/child-list', {
					pid: id
				});
			},
			onAgentView(id) {
				this.jump('/pages/app/agent/view', {
					id: id
				});
			},
			childTypeClick(param) {
				this.jump('/pages/app/agent/team-list', {
					type: param.type,
					pid: param.id
				})
			},
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},

			async getList(search = '') {
				uni.showLoading()
				this.loadStatus = 'loadmore';
				const res = await this.$http('agent.teamList', {
					page: this.currentPage,
					type: this.type,
					pid: this.pid,
				});
				uni.hideLoading()
				if (res.code !== 0) {
					const data = res.data;
					this.total = data.total;
					if (data.total) this.teamList = this.teamList.concat(data.list);
					this.lastPage = Math.ceil(data.total / 10);
					this.loadStatus = this.currentPage < this.lastPage ? 'loadmore' : 'nomore';
				}
			},
			async searchUser(value) {
				if (!value) {
					this.$u.toast('请输入搜索内容');
					return;
				}
				uni.showLoading()
				const res = await this.$http('agent.searchNext', {
					type: this.type,
					search: value
				});
				uni.hideLoading()
				if (res.code !== 0) {
					if (!this.title.includes('搜索结果')) this.title += '搜索结果';
					this.total = res.data.length;
					this.teamList = res.data;
					this.loadStatus = 'nomore';
				}
			},
			async clearSearch() {
				this.title = this.title.replace('搜索结果', '')
				this.teamList = [];
				this.getList()
			},

			// 二级加载更多
			childrenLoadMore(id) {
				if (!this.isRefresh) {
					// 加载更多
					if (this.childrenCurrentPage < this.childrenLastPage) {
						this.isRefresh = true;
						this.childrenCurrentPage += 1;
						this.getChildrenTeam(id);
					}
				}
			},

			// 加载更多
			loadMore() {
				if (this.loadStatus !== 'nomore') {
					this.currentPage += 1;
					this.getList();
				}
			}
		}
	};
</script>

<style lang="scss">
	.end-btn {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;

		.u-btn {
			flex-shrink: 0;
			margin: 0 20rpx;
			flex: 0;
		}
	}

	// 推荐人
	.referrer-box {
		font-size: 28rpx;
		font-weight: 500;
		color: #ffffff;
		margin-top: 10rpx;
	}

	// 二级加载更多按钮
	.refresh-btn {
		width: 100%;
		line-height: 100rpx;
		background: #ffffff;
		border-radius: 25rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #999999;
		white-space: nowrap;

		.cuIcon-refresh {
			color: #dbdbdb;
			margin-right: 12rpx;
			font-size: 32rpx;
		}
	}

	.refresh-active {
		transform: rotate(360deg);
		transition: all linear 0.5s;
	}

	// 头部卡片
	.head_box {
		background: url($IMG_URL+'/imgs/commission/card_bg.png') no-repeat;
		background-size: 100% 100%;
		padding-bottom: 30rpx;
	}

	//数据展示BOX
	.data-num-box {
		margin: 30rpx 20rpx 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background: #ffffff;
		border-radius: 20rpx;
		padding: 20rpx;

		.num-item {
			width: 100%;
			margin: 20rpx 10rpx;

			.item-title {
				font-size: 22rpx;
				font-weight: 500;
				color: #999999;
				line-height: 30rpx;
				margin-bottom: 10rpx;
			}

			.total-num {
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;
			}
		}
	}

	// 团队信息总览
	.team-data-box {
		padding: 30rpx;
		background: #ffffff;
		border-bottom: 10rpx solid #eee;

		.data-card {
			.referrer-avatar {
				width: 34rpx;
				height: 34rpx;
				border-radius: 50%;
			}

			.item-title {
				font-size: 22rpx;
				font-weight: 500;
				color: #999999;
				line-height: 30rpx;
				margin-bottom: 10rpx;
				display: flex;
				align-items: center;
			}

			.total-item {}

			.total-num {
				font-size: 24rpx;
				font-weight: 500;
				color: #999;
				margin-top: 20rpx;
			}

			.category-num {
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
			}
		}
	}

	// 团队列表
	.team-box {
		.team-list {
			background: #fff;
			border-bottom: 10rpx solid #eee;

			.team-children {
				margin-left: 80rpx;
				margin-right: 20rpx;
				height: 132rpx;
				border-bottom: 1rpx solid #eee;

				.head-img {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-right: 38rpx;
				}

				.head-info {
					.head-time {
						font-size: 22rpx;
						font-weight: 400;
						color: #999999;
					}

					.name-box {
						margin-bottom: 12rpx;

						.name-text {
							font-size: 24rpx;
							font-weight: 500;
							color: #666;
						}

						.tag-box {
							background: rgba(0, 0, 0, 0.2);
							border-radius: 21rpx;
							line-height: 30rpx;
							padding-right: 10rpx;
							margin-left: 10rpx;

							.tag-img {
								width: 34rpx;
								height: 34rpx;
								margin-right: 6rpx;
								border-radius: 50%;
							}

							.tag-title {
								font-size: 18rpx;

								font-weight: 500;
								color: rgba(255, 255, 255, 1);
								line-height: 20rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
